<template>
  <div v-loading="loading" class="manage-coupon">

    <div class="top-main">
      <div class="app-main-top-box">
        <div class="title">预制卡券</div>
      </div>
      <div class="tab">
        <el-tabs v-model="tabName" @tab-click="changeTab">
          <el-tab-pane label="预制卡券" name="pre" />
          <el-tab-pane label="预制历史" name="record" />
        </el-tabs>
      </div>
    </div>

    <!-- 列表 -->
    <div class="content-main app-main-content-box">
      <PreRecord v-if="tabName==='record'" ref="preRecord" />
      <PreForm v-if="tabName==='pre'" ref="preForm" />
    </div>

  </div>
</template>

<script>
import PreForm from './components/PreForm'
import PreRecord from './components/PreRecord'
import { couponList } from '../../api/coupon'
export default {
  components: {
    PreForm,
    PreRecord
  },
  data() {
    return {
      // 配置

      // 状态
      loading: false,
      isShowDetail: false,
      // 数据
      list: [], // 列表
      tabName: 'pre'
    }
  },
  mounted() {},
  methods: {
    /**
     * 获取数据
     * */

    /*
    * 按钮组
    * */
    // 切换tab
    changeTab() {

    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* tab */
  ::v-deep {
    .el-tabs__header {
      margin-bottom: 0;
      background-color: #fff;
      border-radius: 0 0 5px 5px;
    }
    .el-tabs__nav-wrap::after {
      background-color: #fff;
    }
    .el-tabs__active-bar {
      height: 4px;
    }
  }

  /* 头部 */
  .top-main {
    padding: 24px 30px 0;
    border-radius: 5px 5px;
    background-color: #fff;
    margin-bottom: 10px;
    .title {
      font-size: 20px;
    }
  }
</style>
